<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="http://pt41.com/quickfun/style/css/layout.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Untitled Document</title>

<style>
.title {
	text-align:center;
}
.title:after {
	width: 180px;
	height: 30px;
	content: " ";
	margin-left: -90px;
	border: 1px solid rgba(200, 200, 200, .8);
	background: rgba(254, 254, 254, .6);
	-moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
	-moz-transform: rotate(-5deg); 
	-webkit-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
    transform: rotate(-5deg);
	position: absolute;
	left: 50%;
	top: -15px;
}
.page {
	width: 600px;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom:50px;
	padding: 1em 0 2em;
	background-color: #FFFFD2;
	-moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 0 #F6EF97;
	position: relative;
}

.page:before {
    -webkit-transform: skew(-15deg) rotate(-5deg);
    -moz-transform: skew(-15deg) rotate(-5deg);
	-o-transform: skew(-15deg) rotate(-5deg);
    transform: skew(-15deg) rotate(-5deg);
    left: 15px;
}
.page:after {
    -webkit-transform: skew(15deg) rotate(5deg);
    -moz-transform: skew(15deg) rotate(5deg);
	-o-transform: skew(15deg) rotate(5deg);
    transform: skew(15deg) rotate(5deg);
    right: 15px;
}
.page:before, .page:after {
    width: 90%;
    height: 20%;
    content: ' ';
		
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    position: absolute;
    bottom: 22px;
    z-index: -1;
}
.page p {
	line-height: 2em;
	padding: 0 2em;
}
</style>
<style>
/* 收缩展开效果 */
.box{
	border: 0px solid #FFFFD2;
	width: 580px;
	margin: 0 auto;
	background: #FFFFD2;
	overflow: hidden;
	padding-left: 20px;
}

/*纯CSS制作三角*/
.toggle{border:12px solid #FFFFD2; height:0px; width:0px; overflow:hidden; border-top-color:#FF6600;}
.active{border:12px solid #FFFFD2; height:0px; width:0px; overflow:hidden; border-bottom-color:#FF6600;}
                              
.base{cursor:pointer;margin:5px auto;}
.box span {margin:5px 8px;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.more{line-height:22px;clear:both;}
</style>


</head>
<body>
<script type="text/javascript">
                              
$(document).ready(function(){
    $("div.more").hide();
    $(".toggle").click(function(){
        $(this).next(".more").slideToggle("slow");
        $(this).toggleClass("active");  
    })  
});
</script>
<div class="container_all">
	<div class="header">
		<div class="container_12">
			<div class="grid_12 ">
			  <img id="logo1" src="http://pt41.com/quickfun/style/images/logo.gif" />
			  <img id="logo2" src="http://pt41.com/quickfun/style/images/logo_02.gif" />
			</div>
		</div>
	</div>
	<div class="page">
		<h2 class="title">聚会信息</h2>
		<p>主题：<?php echo $information['theme'];?></p>
		<p>地点：<?php echo $information['place'];?></p>
		<p>时间：<?php echo $information['finalDate'];?></p>
		<p>内容：<?php echo $information['content'];?></p>
		<p><?php echo $information['finalAttendNum'];?>个人参与：</p>
		<div class="box">
			<?php foreach($information['attendName'] as $key=>$value){?>
				<?php if($key==0){?>
				<div>
					<span><?php echo $value;?></span>
				<?php }else if($key==5){?>
				<span><?php echo $value;?></span>
				</div>
				<?php }else if($key==6){?>
				<div class="toggle base" ></div>
				<div class="more">
					<span><?echo $value;?></span>
				<?php }else{?>
				<span><?echo $value;?></span>
				<?php }?>
			<?php }?>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="container_12">
			<div class="grid_12">
				<div class="grid_6 prefix_3 suffix_3">
					&copy;2012 快聚FUN&nbsp;&nbsp;&nbsp;&nbsp;
					联系我们：<a href="#">easygathering@gmail.com</a>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
